<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
	<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
	<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
	<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
	<style>
		body{
			padding:30px;
		}
		.row table{
			margin-left:9px;
		}
		.row thead{
			background:#D9EDF7;
		}
		.row table th,.row table td{
			text-align:center;
		}
		.well{
			background:#D9EDF7;
			width:97.7%;
		}
	</style>
 
</head>
<body>
 	<div class="well">
 		<form class="" action="<%=basePath%>group/show">
 			<input type="text" name="keyword" class="control-text span-width" placeholder="角色名称…">
 			<input type="submit" class="button button-info" value="查询" style="margin-left:30px;">
 			<a href="#" id="addUser" class="button button-default" style="margin-left:30px;">添加</a>
 		</form> 
 	</div>
 	<center>
 		<s:property value="tip"/>
 	</center>
	<div class="row">
	    <table class="table table-bordered">
	      <thead>
	        <tr>
	          <th>角色ID</th>
	          <th>角色名</th>
	          <th>角色类型</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      <tbody>
	       <!-- 迭代输出数据 -->
			<s:iterator value="pageInfo.basePageList" var="one">
			<tr>
				<td><s:property value="#one.id"/></td>
				<td> <s:property value="#one.name"/></td>
				<td> <s:property value="#one.type"/></td><!-- 需要做判断 -->
				<td>
		          	<a class="update button" title="<s:property value="#one.id"/>" style="border:0px;"  ><i class="icon-black icon-edit"></i></a>
	              	<a href="<%=basePath%>group/delete?group.id=<s:property value="#one.id"/>" 
	              		class="delete button" style="border:0px;"  ><i class="icon-black icon-trash"></i>
	              	</a>
	         	 </td>
			</tr>
			</s:iterator>
	      </tbody>
	    </table>
	    
	    <div>
	      <div class="pagination pull-right">
	        <ul>
				<!-- 显示总记录数和总页数 -->
				<li class="disabled" style="letter-spacing:2px;">
					<a href="">
						总共<s:property value="pageInfo.rootListSize"/>条/<s:property value="pageInfo.pageCount"/>页
					</a>
				</li>

				<!-- 是否要上一页按钮 -->
				<s:if test="pageInfo.nowPage>1">
					<li class="active">
						<a href="<%= basePath %>group/show?targetPage=<s:property value="pageInfo.nowPage - 1"/>">« 上一页</a>
					</li>
				</s:if>
				<s:else>
					<li class="disable">
						<a href="#">« 上一页</a>
					</li>
				</s:else>
				
				<!-- 迭代输出每一页的页号 -->
				<s:iterator value="pageInfo.pageNoList" var="page">
					<!-- 首先确保不是-1 -->
					<s:if test="#page != -1">
						<s:if test="#page != 0">
							<!-- 如果是当前页，特殊颜色显示 -->
							<s:if test="#page == pageInfo.nowPage">
								<li class="active">
									<a href="<%= basePath %>group/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="#page"/>">
										<s:property value="#page"/>
									</a>
								</li>
							</s:if>
							
							<!-- 否则一般颜色显示 -->
							<s:else>
								<li>
									<a href="<%= basePath %>group/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="#page"/>">
										<s:property value="#page"/>
									</a>
								</li>
							</s:else>
						</s:if>
						<s:else>
							<li>
								<a href="<%= basePath %>group/show?keyword=<s:property value="keyword"/>&targetPage=1">...</a>
							</li>
						</s:else>
					</s:if>
				</s:iterator>
				
				<!-- 是否需要最后一页的按钮 -->
				<s:if test="pageInfo.pageCount == pageInfo.nowPage">
					<li class="disable">
						<a href="#">下一页 »</a>
					</li>
				</s:if>
				<s:else>
					<li class="active">
						<a href="<%= basePath %>group/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="pageInfo.nowPage + 1"/>">下一页 »</a>
					</li>
				</s:else>
			</ul>
	      </div>
	    </div>
	    
	  </div>



	<!-- 此节点内部的内容会在弹出框内显示,默认隐藏此节点-->
    <div id="content" class="hidden" style="visibility:hidden;">
       <form id="form" action="<%=basePath%>group/add" class="form-horizontal">
        <div class="row">
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label">角色ID：</label>
            <div class="controls">
              <input type="text" name="group.id"
              class="input-normal control-text" data-rules="{required : true}">
            </div>
          </div>
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label" >角色名：</label>
            <div class="controls">
              <input type="text" name="group.name" 
              class="input-normal control-text" data-rules="{required : true,minlength:2}">
            </div>
          </div>
          <!-- 
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label" >类型：</label>
            <div class="controls">
              <input type="text" name="group.type" 
              class="input-normal control-text" data-rules="{required : true}">
            </div>
          </div>
           --> 
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label">角色类型：</label>
            <div class="controls">
              <select class="input-normal" name="group.type" > 
                 <option selected value="111">网点</option>
                 <option value="11">职能部门</option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </div>

<!-- 添加 script start --> 
    <script type="text/javascript">
        BUI.use(['bui/overlay','bui/form'],function(Overlay,Form){
    
      var form = new Form.HForm({
        srcNode : '#form'
      }).render();
 
      var dialog = new Overlay.Dialog({
            title:'添加角色 ',
            width:500,
            height:320,
            //配置DOM容器的编号
            contentId:'content',
            success:function () {
              
              $("#form").submit();
              
              
            }
          });
        
        $('#addUser').on('click',function () {
          dialog.show();
        });
       

      });
    </script>
<!-- script end -->

<!-- 删除 script -->
<script type="text/javascript">
     var href="";
        BUI.use('bui/overlay',function(Overlay){
          var dialog = new Overlay.Dialog({
            title:'确认框 ',
            width:300,
            height:200,
            bodyContent:'<p>是否确认删除  ？ </p>',
            success:function () {
            	console.log(href);
            	window.location.href=href;
            }
          });
        
        $('.delete').on('click',function (e) {
        	e.preventDefault();//a标签禁用
        	href=this.href;
          	dialog.show();
        });
        
		$('.update').on('click',function (e) {
			e.preventDefault();//a标签禁用
        	var value = this.title; //^_^  ok
			<!--window.location.pathname ="/id="+value;-->
			window.location.href='<%=basePath%>group/showEdit?group.id='+ value;
        });
    });
        

  </script>
</body>
</html>